<template>
    <el-form
    ref="formInline"
    :inline="true"
    :model="formInline"
    class="demo-form-inline">
        <div class="left">
          <el-form-item :label="cTitle" style="margin-right:60px" prop="tagName">
            <el-input v-model.trim="formInline.name" :placeholder="cTitle"></el-input>
          </el-form-item>
          <el-form-item
          label="状态"
          prop="state"
          v-if="name!=='学科'">
            <el-select v-model="formInline.state" placeholder="请选择">
              <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              clearable
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item >
          <el-button  @click="reset">清除</el-button>
          <el-button
          type="primary"
          v-loading="isLoading"
          @click="doSearch">
          搜索</el-button>
          </el-form-item>
        </div>
        <div class="right">
           <el-button  icon="el-icon-arrow-left" v-if="name!=='学科'&&routeQuery" @click="$router.push('list')">返回学科</el-button>
          <el-button
          type="success"
          icon="el-icon-edit"
          @click="openDialog"
          >新增{{name}}</el-button></div>
    </el-form>
</template>
<script>
import { status } from '@/api/hmmm/constants'
export default {
  name: 'SearchForm',
  data () {
    return {
      isLoading: false,
      formInline: {
        name: '',
        state: ''
      },
      queryParams: {
      }
    }
  },
  computed: {
    status () {
      return status
    },
    cTitle () {
      return this.name + '名称'
    }
  },
  props: {
    name: {
      type: [String]
    },
    routeQuery: {
      type: [String, Number],
      required: false
    }
  },
  methods: {
    // 搜索事件，子向父传参
    async doSearch () {
      const { name, state } = this.formInline
      this.queryParams = state === 1 || state === 0 ? { name, state } : { name }
      this.$emit('doSearch', this.queryParams)
    },
    // 清除搜索表单
    reset () {
      console.log(1)
      this.formInline.name = ''
      this.formInline.state = null
      this.$refs.formInline.resetFields()
      this.queryParams = {}
      // this.queryParams.state = null
      this.$emit('doSearch', this.queryParams)
    },
    // 打开弹窗
    openDialog () {
      this.$emit('open')
    }
  }
}
</script>
